<template>
  <div class="dashboard-container">
    <h1 class="page-title">📊 管理后台首页</h1>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card" style="border-left: 4px solid #409EFF">
          <div class="stat-content">
            <div class="stat-left">
              <div class="stat-label">总用户数</div>
              <div class="stat-value">{{ statistics.totalUsers }}</div>
              <div class="stat-trend">
                <i class="el-icon-top" style="color: #67C23A"></i>
                <span>较昨日 +{{ statistics.userGrowth }}%</span>
              </div>
            </div>
            <div class="stat-icon" style="background: #409EFF20">
              <i class="el-icon-user" style="color: #409EFF"></i>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="stat-card" style="border-left: 4px solid #67C23A">
          <div class="stat-content">
            <div class="stat-left">
              <div class="stat-label">总宠物数</div>
              <div class="stat-value">{{ statistics.totalPets }}</div>
              <div class="stat-trend">
                <i class="el-icon-top" style="color: #67C23A"></i>
                <span>较昨日 +{{ statistics.petGrowth }}%</span>
              </div>
            </div>
            <div class="stat-icon" style="background: #67C23A20">
              <i class="el-icon-sunrise" style="color: #67C23A"></i>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="stat-card" style="border-left: 4px solid #E6A23C">
          <div class="stat-content">
            <div class="stat-left">
              <div class="stat-label">今日订单</div>
              <div class="stat-value">{{ statistics.todayOrders }}</div>
              <div class="stat-trend">
                <i class="el-icon-top" style="color: #67C23A"></i>
                <span>较昨日 +{{ statistics.orderGrowth }}%</span>
              </div>
            </div>
            <div class="stat-icon" style="background: #E6A23C20">
              <i class="el-icon-shopping-bag-2" style="color: #E6A23C"></i>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="stat-card" style="border-left: 4px solid #F56C6C">
          <div class="stat-content">
            <div class="stat-left">
              <div class="stat-label">今日销售额</div>
              <div class="stat-value">¥{{ statistics.todaySales }}</div>
              <div class="stat-trend">
                <i class="el-icon-top" style="color: #67C23A"></i>
                <span>较昨日 +{{ statistics.salesGrowth }}%</span>
              </div>
            </div>
            <div class="stat-icon" style="background: #F56C6C20">
              <i class="el-icon-coin" style="color: #F56C6C"></i>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="16">
        <el-card>
          <div slot="header">
            <span>销售趋势</span>
            <el-radio-group v-model="salesPeriod" size="small" style="float: right">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">本年</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-container" style="height: 350px">
            <div class="chart-placeholder">
              <i class="el-icon-data-line"></i>
              <p>销售趋势图表区域</p>
              <p style="font-size: 12px; color: #999;">可集成 ECharts 或 Chart.js</p>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card>
          <div slot="header">
            <span>宠物分类统计</span>
          </div>
          <div class="chart-container" style="height: 350px">
            <div class="chart-placeholder">
              <i class="el-icon-pie-chart"></i>
              <p>宠物分类饼图</p>
              <p style="font-size: 12px; color: #999;">可集成 ECharts 或 Chart.js</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作和通知 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>快捷操作</span>
          </div>
          <div class="quick-actions">
            <el-button type="primary" icon="el-icon-plus" @click="goToPage('/admin/pet-manage')">
              新增宠物
            </el-button>
            <el-button type="success" icon="el-icon-goods" @click="goToPage('/admin/order-manage')">
              订单管理
            </el-button>
            <el-button type="warning" icon="el-icon-service" @click="goToPage('/admin/service-manage')">
              服务管理
            </el-button>
            <el-button type="info" icon="el-icon-user" @click="goToPage('/admin/staff-manage')">
              员工管理
            </el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>系统通知</span>
            <el-badge :value="notifications.length" class="badge-item" style="float: right"></el-badge>
          </div>
          <div class="notification-list">
            <div class="notification-item" v-for="item in notifications" :key="item.id">
              <div class="notification-icon">
                <i :class="item.icon" :style="{ color: item.color }"></i>
              </div>
              <div class="notification-content">
                <div class="notification-title">{{ item.title }}</div>
                <div class="notification-time">{{ item.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 待处理事项 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>待处理事项</span>
          </div>
          <el-table :data="pendingItems" style="width: 100%">
            <el-table-column prop="type" label="类型" width="120">
              <template slot-scope="scope">
                <el-tag :type="getTypeTag(scope.row.type)">{{ scope.row.type }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="内容" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTime" label="时间" width="180"></el-table-column>
            <el-table-column prop="priority" label="优先级" width="100">
              <template slot-scope="scope">
                <el-tag :type="getPriorityTag(scope.row.priority)" size="small">
                  {{ scope.row.priority }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handlePendingItem(scope.row)">
                  处理
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data () {
    return {
      statistics: {
        totalUsers: 1258,
        userGrowth: 12.5,
        totalPets: 456,
        petGrowth: 8.3,
        todayOrders: 35,
        orderGrowth: 15.6,
        todaySales: 8960,
        salesGrowth: 22.3
      },
      salesPeriod: 'week',
      notifications: [],
      pendingItems: []
    }
  },
  created () {
    this.loadDashboardData()
  },
  methods: {
    loadDashboardData () {
      // 模拟数据 - 将来对接 GET /api/admin/dashboard
      this.notifications = [
        { id: 1, icon: 'el-icon-warning', color: '#E6A23C', title: '有3个新的服务预约待确认', time: '10分钟前' },
        { id: 2, icon: 'el-icon-message', color: '#409EFF', title: '用户张三提交了寄养申请', time: '30分钟前' },
        { id: 3, icon: 'el-icon-goods', color: '#67C23A', title: '有5个订单待发货', time: '1小时前' }
      ]

      this.pendingItems = [
        { id: 1, type: '服务预约', content: '用户张三预约宠物洗澡服务', createTime: '2024-01-25 14:30', priority: '紧急' },
        { id: 2, type: '寄养申请', content: '用户李四申请宠物寄养(2024-02-01至2024-02-10)', createTime: '2024-01-25 13:20', priority: '普通' },
        { id: 3, type: '订单处理', content: '订单号ORD202401250001待发货', createTime: '2024-01-25 12:00', priority: '紧急' }
      ]
    },
    goToPage (path) {
      this.$router.push(path)
    },
    handlePendingItem (row) {
      this.$message.info(`处理：${row.content}`)
    },
    getTypeTag (type) {
      const typeMap = {
        '服务预约': 'primary',
        '寄养申请': 'success',
        '订单处理': 'warning'
      }
      return typeMap[type] || 'info'
    },
    getPriorityTag (priority) {
      const priorityMap = {
        '紧急': 'danger',
        '重要': 'warning',
        '普通': 'info'
      }
      return priorityMap[priority] || 'info'
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.page-title {
  margin: 0 0 20px 0;
  font-size: 24px;
  color: #333;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.stat-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-left {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.stat-trend {
  font-size: 12px;
  color: #67C23A;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  text-align: center;
  color: #999;
}

.chart-placeholder i {
  font-size: 80px;
  margin-bottom: 15px;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.notification-list {
  max-height: 280px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 20px;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
}

.notification-time {
  font-size: 12px;
  color: #999;
}
</style>
